<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<!--bootstrap栅格系统-->
<!--bootstrap容器-->
<body class="container-fluid">
<!--bootstrap行-->
<div class="row">
    <!--bootstrap大设备元素-->
    <div class="col-lg-3">
        人生不过几十年，似水一样流淌，不可遏阻。一场轮回的时间，能遇见一场烟火的表演，本身就是一种幸福，即使结局是烟花熄灭，但终究在天空中绽放了笑脸。我们在哪一年可以用一个决定让一生改变，谁都算不出流年。过好每一年、每一天，俗物养人，平凡是真。
    </div>
    <!--bootstrap中设备元素-->
    <div class="col-md-3">
        人生不过几十年，似水一样流淌，不可遏阻。一场轮回的时间，能遇见一场烟火的表演，本身就是一种幸福，即使结局是烟花熄灭，但终究在天空中绽放了笑脸。我们在哪一年可以用一个决定让一生改变，谁都算不出流年。过好每一年、每一天，俗物养人，平凡是真。
    </div>
    <!--bootstrap小设备元素-->
    <div class="col-sm-3">
        人生不过几十年，似水一样流淌，不可遏阻。一场轮回的时间，能遇见一场烟火的表演，本身就是一种幸福，即使结局是烟花熄灭，但终究在天空中绽放了笑脸。我们在哪一年可以用一个决定让一生改变，谁都算不出流年。过好每一年、每一天，俗物养人，平凡是真。
    </div>
    <!--bootstrap超小设备元素-->
    <div class="col-xs-3">
        人生不过几十年，似水一样流淌，不可遏阻。一场轮回的时间，能遇见一场烟火的表演，本身就是一种幸福，即使结局是烟花熄灭，但终究在天空中绽放了笑脸。我们在哪一年可以用一个决定让一生改变，谁都算不出流年。过好每一年、每一天，俗物养人，平凡是真。
    </div>
</div>
<div class="row">
    <div class="col-sm-2"><h3>左侧栏</h3>
        人生不过几十年，似水一样流淌，不可遏阻。一场轮回的时间，能遇见一场烟火的表演，本身就是一种幸福，即使结局是烟花熄灭，但终究在天空中绽放了笑脸。我们在哪一年可以用一个决定让一生改变，谁都算不出流年。过好每一年、每一天，俗物养人，平凡是真。
    </div>
    <div class="col-sm-8"><h1>内容</h1>
        人生不过几十年，似水一样流淌，不可遏阻。一场轮回的时间，能遇见一场烟火的表演，本身就是一种幸福，即使结局是烟花熄灭，但终究在天空中绽放了笑脸。我们在哪一年可以用一个决定让一生改变，谁都算不出流年。过好每一年、每一天，俗物养人，平凡是真。
    </div>
    <div class="col-sm-2"><h3>右侧栏</h3>
        人生不过几十年，似水一样流淌，不可遏阻。一场轮回的时间，能遇见一场烟火的表演，本身就是一种幸福，即使结局是烟花熄灭，但终究在天空中绽放了笑脸。我们在哪一年可以用一个决定让一生改变，谁都算不出流年。过好每一年、每一天，俗物养人，平凡是真。
    </div>
</div>

</body>
</html>


<!--
        .col-xs-N　　无论屏幕宽度如何，单元格都在一行，宽度按照百分比设置；用于手机；
　　　　.col-sm-N　　屏幕大于768px时，单元格在一行显示；屏幕小于768px时，独占一行；用于平板；
　　　　.col-md-N　　屏幕大于992px时，单元格在一行显示；屏幕小于992px时，独占一行；用于桌面显示器；
　　　　.col-lg-N　　屏幕大于1200px时，单元格在一行显示；屏幕小于1200px时，独占一行；用于大型桌面显示器；
-->